<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Calendar</title>
  </head>
  <body>
    <div class="calendar">
      <p id="year"></p>
      <p id="monthName"></p>
      <p id="dayNumber"></p>
      <p id="week"></p>
    </div>
    <script>
      const lang = navigator.language;
      let date = new Date();

      let monthName = date.toLocaleString(lang, { month: "long" });
      let dayNumber = date.getDate();
      let week = date.toLocaleString(lang, { weekday: "long" });
      let year = date.getFullYear();
      let month = date.getMonth();

      document.getElementById("monthName").innerHTML = monthName;
      document.getElementById("dayNumber").innerHTML = dayNumber;
      document.getElementById("week").innerHTML = week;
      document.getElementById("year").innerHTML = year;
    </script>
  </body>
</html>
